<template>
  <div>
    <!-- <div style="display:flex;align-items: center;justify-content: space-around;margin-bottom:24px"></div> -->
    <div style="margin:24px 0;">
      <el-button
        type="primary"
        size="small"
        @click="dialogNewGroupVisible=true"
      >添加科目分组</el-button>
      <el-button
        type="primary"
        size="small"
        @click="dialogNewSubjectVisible=true"
      >添加专项训练科目</el-button>
      <span style="display:inline;margin-left:12px;color:#909399;font-size:12px;">单击科目名称可设置预设评价</span>
    </div>
    <el-card shadow="never">
      <el-tree
        :data="content"
        :props="{
          children: 'children',
          label: 'label'
        }"
        @node-click="handleNodeClick"
        accordion
      >
        <div
          class="custom-tree-node"
          slot-scope="{ node,data }"
        >
          <span>{{ node.label }}</span>
            <el-tag
              v-if="data.options!=undefined"
              size="mini"
              style="text-align:center;width:30px"
            >{{data.options.length}}</el-tag>
        </div>
      </el-tree>
    </el-card>
    <el-dialog
      :title="editorTitle"
      :visible.sync="editorVisible"
      @close="handleEditorClose"
      destroy-on-close
      center
      :width="dialogWidth"
    >
      <div>
        <el-tag
          :key="tag"
          v-for="tag in editorContent"
          closable
          :disable-transitions="false"
          @close="handleTagDelete(tag)"
          style="margin:0 8px 8px 0"
        >
          {{tag}}
        </el-tag>
        <el-input
          v-model="inputValue"
          size="small"
          @keyup.enter.native="handleTagInsert"
          @blur="handleTagInsert"
          style="width:100%;margin-bottom:8px"
        >
        </el-input>
        <el-alert
          v-if="editorContent.indexOf(inputValue)>-1"
          :closable="false"
        >“{{inputValue}}”已存在</el-alert>
      </div>
    </el-dialog>
    <el-dialog
      title="添加专项训练科目"
      :visible.sync="dialogNewSubjectVisible"
      destroy-on-close
      center
    >
      <el-form label-width="100px">
        <el-form-item label="所属分组">
          <el-select
            v-model="newSubjectGoupID"
            style="width:100%"
            size="small"
          >
            <el-option
              v-for="(item,index) in content"
              :key="index"
              :value="index"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目名称">
          <el-input
            v-model="newSubjectTitle"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="handleAddSubject"
          >添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="添加科目分组"
      :visible.sync="dialogNewGroupVisible"
      destroy-on-close
      center
    >
      <el-form label-width="100px">
        <el-form-item label="分组名称">
          <el-input
            v-model="newGroupTitle"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="handleAddGroup"
          >添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "evaluationPresetView",
    data() {
      return {
        editorVisible: false,
        editorTitle: "",
        editorContent: [],
        content: [],
        contentBak: "",
        inputValue: '',
        dialogNewSubjectVisible: false,
        newSubjectTitle: "",
        newSubjectGoupID: "",
        dialogNewGroupVisible: false,
        newGroupTitle: "",
      }
    },
    computed: {
      contentRaw() { return this.$store.state.params.subjects },
      dialogWidth() { return this.$store.getters.dialogWidth },
    },
    methods: {
      handleAddGroup() {
        if (this.newGroupTitle.length < 5 || this.newGroupTitle.length > 16) {
          this.$notify.error("分组名称应不少于5个字且不多于16个字");
          return false;
        } else {
          for (let i = 0; i < this.content.length; i++) {
            if (this.content[i].label == this.newGroupTitle) {
              this.$notify.error("中已存在分组“" + this.newGroupTitle + "”");
              return false;
            }
          }
          this.content.push({
            label: this.newGroupTitle,
            children: [],
          });
          this.saveContent();
          this.dialogNewGroupVisible = false;
          this.newGroupTitle = "";
          return true;
        }
      },
      handleAddSubject() {
        if (this.newSubjectTitle.length < 5 || this.newSubjectTitle.length > 16) {
          this.$notify.error("科目名称应不少于5个字且不多于16个字");
          return false;
        } else {
          for (let i = 0; i < this.content[this.newSubjectGoupID].children.length; i++) {
            if (this.content[this.newSubjectGoupID].children[i].label == this.newSubjectTitle) {
              this.$notify.error("“" + this.content[this.newSubjectGoupID].label + "”中已存在“" + this.newSubjectTitle + "”");
              return false;
            }
          }
          this.content[this.newSubjectGoupID].children.push({
            label: this.newSubjectTitle,
            options: [],
          });
          this.saveContent();
          this.dialogNewSubjectVisible = false;
          this.newSubjectTitle = "";
          return true;
        }
      },
      handleNodeClick(data) {
        // console.log(data);
        if (data.options) {
          this.editorContent = data.options;
          this.editorTitle = data.label;
          this.editorVisible = true;
        }
      },
      handleEditorClose() {
        this.editorContent = [];
        this.inputValue = '';
        if (JSON.stringify(this.content) != this.contentBak) {
          this.saveContent();
        }
      },
      handleTagDelete(tag) {
        this.editorContent.splice(this.editorContent.indexOf(tag), 1);
        // this.saveContent();
      },
      handleTagInsert() {
        if (this.inputValue && this.editorContent.indexOf(this.inputValue) == -1) {
          this.editorContent.push(this.inputValue);
          this.inputValue = '';
          // this.saveContent();
        }
      },
      saveContent() {
        console.log('saveContent');
        this.$store.dispatch("saveParam", { name: "subjects", content: this.content }).then(() => {
          // console.log(data);
          this.$notify.success("已保存");
          this.contentBak = JSON.stringify(this.contentRaw);
        });
      }
    },
    mounted() {
      this.$store.dispatch("getParams").then(() => {
        this.contentBak = JSON.stringify(this.contentRaw);
        this.content = JSON.parse(JSON.stringify(this.contentRaw));
      });
    }
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>